<template>
  <div class="table-bg1">
    <div>
      <div style="display: flex;padding-top: 15px;padding-left:16px">
        <a-form layout="inline">
          <a-form-item label="监管员">
            <a-input
              v-model="searchName"
              placeholder="请输入监管员姓名"
            />
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              @click="handSearc2()"
            >搜索</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <a-table
      ref="table"
      bordered
      :rowKey="record => record.id"
      :columns="columns"
      :dataSource="data"
      :loading="false"
      :pagination="pagination"
      :scroll="scroll"
    >
      <!-- 身份证正面 -->
      <img
        class="anty-img-wrap"
        style="max-width:150px;max-height: 80px;"
        :src="record.sfzzm"
        alt
        slot="sfzzm"
        slot-scope="text, record"
      />
      <!-- 身份证反面 -->
      <img
        class="anty-img-wrap"
        style="max-width:150px;max-height: 80px;"
        :src="record.sfzfm"
        alt
        slot="sfzfm"
        slot-scope="text, record"
      />
      <img
        class="anty-img-wrap"
        style="max-width:150px;max-height: 80px;"
        :src="record.gzz"
        alt
        slot="gzz"
        slot-scope="text, record"
      />
      <p
        class="grjl"
        slot="grjl"
        slot-scope="text, record"
      >{{text}}</p>
      <p
        class="sex"
        slot="sex"
        slot-scope="text, record"
      >{{text=='1'?'男':text=='0'?'女':text}}</p>
      <p
        class="diqu"
        slot="diqu"
        slot-scope="text, record"
      >{{text}}</p>
      <p
        class="xxdz"
        slot="xxdz"
        slot-scope="text, record"
      >{{text}}</p>
      <div
        slot="auditStatus"
        slot-scope="text, record"
      >
        <a-tag
          color="orange"
          v-if="record.auditStatus==1"
        >审核中</a-tag>
        <a-tag
          color="green"
          v-if="record.auditStatus==2"
        >已通过</a-tag>
        <a-tag
          color="red"
          v-if="record.auditStatus==3"
        >审核不通过</a-tag>
      </div>
      <div
        class="fun_box"
        slot="action"
        slot-scope="text, record"
      >
        <a-dropdown-button style="margin-bottom: 20px;">
          {{record.auditStatus==1?'审核中':record.auditStatus==2?'已通过':'审核不通过'}}
          <a-menu slot="overlay">
            <a-menu-item
              key="1"
              @click="e=>shenhe(1,e,record.id)"
            >
              <a-icon type="exclamation-circle" />审核中
            </a-menu-item>
            <a-menu-item
              key="2"
              @click="e=>shenhe(2,e,record.id)"
            >
              <a-icon type="check-circle" />已通过
            </a-menu-item>
            <a-menu-item
              key="3"
              @click="e=>shenhe(3,e,record.id)"
            >
              <a-icon type="stop" />审核不通过
            </a-menu-item>
          </a-menu>
        </a-dropdown-button>
        <a-button
          type="primary"
          @click="chakanxq(record.id)"
        >查看详情</a-button>
        <a-button
          type="primary"
          @click="tjdp(record.id)"
        >添加店铺</a-button>

        <a-popconfirm
          title="确定删除吗?"
          @confirm="deteles(record.id)"
          @cancel="cancel(record.id)"
          okText="是"
          cancelText="否"
        >
          <a-button
            type="danger"
            style="margin-right: 8px;"
          >删除</a-button>
        </a-popconfirm>
        <!-- 
        <a-button type="primary"
        @click="deteles(record.id)">删除</a-button>-->
        <!-- <div @click="toExport(record.id)">
          <a href="javascript:;">下载</a>
        </div>-->
      </div>
    </a-table>
    <!-- 弹出详情 -->
    <a-modal
      title="详情"
      :visible="xiangqing"
      :width="720"
      @ok="()=>{xiangqing=!xiangqing}"
      @cancel="()=>{xiangqing=!xiangqing}"
    >
      <ui
        v-if="xqxx"
        class="xiangq"
      >
        <li>
          <span>姓名:</span>
          {{xqxx.realname}}
        </li>
        <li>
          <span>手机号:</span>
          {{xqxx.binding}}
        </li>
        <li>
          <span>简历:</span>
          <p style="width:500px">{{xqxx.grjl}}</p>
        </li>
        <li>
          <span>所在地区:</span>
          {{xqxx.diqu}}
        </li>
        <li>
          <span>详细地址:</span>
          {{xqxx.xxdz}}
        </li>
        <li>
          <span>身份证正面:</span>
          <img
            :src="xqxx.sfzzm"
            alt
          />
        </li>
        <li>
          <span>身份证反面:</span>
          <img
            :src="xqxx.sfzfm"
            alt
          />
        </li>
        <li>
          <span>工作证:</span>
          <img
            :src="xqxx.gzz"
            alt
          />
        </li>
      </ui>
    </a-modal>
    <!-- 弹出店铺管理 -->
    <a-modal
      title="店铺管理"
      :visible="dianpuguanli"
      :width="720"
      @ok="()=>{dianpuguanli=!dianpuguanli}"
      @cancel="()=>{dianpuguanli=!dianpuguanli}"
    >
      <a-form layout="inline">
        <a-form-item label="店铺名称">
          <a-input
            v-model="usermch"
            placeholder="请输入店铺名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="handSearc()"
          >搜索</a-button>
        </a-form-item>
      </a-form>
      <div class="flex-alv dpgl">
        <div class="yiyoudianpu w100">
          <div
            class="flex-alv"
            v-for="dianpu in dpglleft"
            :key="dianpu.id"
            style="margin:15px 0;"
          >
            <span
              style="margin-right:20px;color:red;cursor:pointer"
              @click="delShop(dianpu.id)"
            >删除</span>
            {{dianpu.name}}
          </div>
        </div>
        <div class="suyoudianpu w100">
          <div
            class="flex-alv"
            v-for="dianpu in allShop"
            :key="dianpu.id"
            style="margin:15px 0;"
          >
            <span
              style="margin-right:20px;color:blue;cursor:pointer"
              @click="addShop(dianpu.id)"
            >添加</span>
            {{dianpu.name}}
          </div>
          <!-- <div @click="handMore()">{{noMore==true?'加载更多':'记载完毕'}}</div> -->
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import reqwest from "reqwest";
import axios from "axios";
export default {
  data() {
    return {
      searchName: "",
      shopName: "",
      dpglleft: [],
      // biaotou:undefined,
      //点击要查看或修改的id
      addid: null,
      xiangqing: false,
      dianpuguanli: false,
      //监管员详情信息
      xqxx: null,
      form: this.$form.createForm(this),
      scroll: { x: 2500 },
      columns: [
        {
          title: "真实姓名",
          align: "center",
          dataIndex: "realname"
        },
        {
          title: "身份证正面",
          align: "center",
          dataIndex: "sfzzm",
          scopedSlots: { customRender: "sfzzm" }
        },
        {
          title: "身份证反面",
          align: "center",
          dataIndex: "sfzfm",
          scopedSlots: { customRender: "sfzfm" }
        },
        {
          title: "手机号码",
          align: "center",
          dataIndex: "binding"
        },
        {
          title: "备用号码",
          align: "center",
          dataIndex: "byhaoma"
        },
        {
          title: "所在地区",
          align: "center",
          dataIndex: "diqu",
          scopedSlots: { customRender: "diqu" }
        },
        {
          title: "详细地址",
          align: "center",
          dataIndex: "xxdz",
          scopedSlots: { customRender: "xxdz" }
        },
        {
          title: "年龄",
          align: "center",
          dataIndex: "age"
        },
        {
          title: "性别",
          align: "center",
          dataIndex: "sex",
          scopedSlots: { customRender: "sex" }
        },
        {
          title: "工作证照片",
          align: "center",
          dataIndex: "gzz",
          scopedSlots: { customRender: "gzz" }
        },
        {
          title: "个人简历",
          align: "center",
          dataIndex: "grjl",
          scopedSlots: { customRender: "grjl" }
        },
        {
          title: "OPENID",
          align: "center",
          dataIndex: "wechatOpenId"
        },
        //插槽用法
        {
          title: "状态",
          align: "center",
          dataIndex: "auditStatus",
          scopedSlots: { customRender: "auditStatus" }
        },
        {
          title: "操作",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      //分页
      pagination: {
        // 分页配置器
        pageSize: 15, // 一页的数据限制
        current: 0, // 当前页
        total: 0, // 总数
        onChange: (page, pageSize) => {
          this.changePage(page, pageSize);
        }
      },
      data: [],
      usermch: "",
      moreNum: 15,
      moreIndex: 0,
      arrNew: [],
      noMore: true
    };
  },
  created() {
    var _this = this;
    //获取监管员
    _this
      .$get("/gen/hjmallind-user/list", {
        pageNum: _this.pagination.current,
        pageSize: _this.pagination.pageSize,
        realname: _this.searchName
      })
      .then(data => {
        console.log(data.data.data);
        console.log(data.data.data.records);
        console.log(data.data.data.total);
        _this.pagination.total = data.data.data.total;
        _this.data = data.data.data.records;
      })
      .catch(err => {
        console.warn(err);
      });
  },
  methods: {
    handSearc2() {
      console.log("搜索");
      this.reFresh();
    },
    handMore() {
      if (this.allShop.length >= this.arrNew.length) {
        this.noMore = false;
      } else {
        this.moreNum += 15;
        this.allShop = this.arrNew.slice(0, this.moreNum);
        console.log(this.arrNew.length);
        // this.$set(this.allShop, this.arrNew.slice(0, this.moreNum));
        this.$forceUpdate();
        console.log(this.allShop);
      }
    },
    cancel() {
      this.$message.error("删除失败");
    },

    // toExport(id) {
    //   console.log("data", this.data, id)
    // },

    //删除
    deteles(id) {
      var _this = this;
      _this
        .$delete("/gen/hjmallind-user/delete/" + id, {})
        .then(data => {
          this.$message.success("删除成功");
          //成功了从新拉取数据
          this.reFresh();
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //切换页面
    changePage(page, pageSize) {
      var _this = this;
      _this.pagination.current = page;
      _this
        .$get("/gen/hjmallind-user/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize,
          realname: _this.searchName
        })
        .then(data => {
          // console.log(data.data.data.records);
          console.log(data.data.data.total);
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
          console.log(_this.data);
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //操作审核状态
    shenhe(type, e, r) {
      console.log(type, r);
      var _this = this;
      //设置选中id
      _this.addid = r;
      _this
        .$post("/gen/hjmallind-user/update/status", {
          id: _this.addid,
          auditStatus: type
        })
        .then(data => {
          console.log(data);
          _this.reFresh();
        });
    },
    //重新刷新数据
    reFresh() {
      var _this = this;
      _this
        .$get("/gen/hjmallind-user/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize,
          realname: _this.searchName
        })
        .then(data => {
          console.log(data.data.data);
          console.log(data.data.data.records);
          console.log(data.data.data.total);
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //查看详情
    chakanxq(id) {
      var _this = this;
      _this.xiangqing = !_this.xiangqing;
      _this.$get(`/gen/hjmallind-user/model/${id}`).then(data => {
        console.log("监管员详情", data.data.data);
        _this.xqxx = data.data.data;
      });
    },
    handSearc() {
      console.log("idddd", this.usermch);
      if (this.usermch == "") {
        this.$message.info("请输入店铺名称");
      } else {
        var _this = this;
        _this
          .$get(`/gen/user-mch/list`, {
            userid: _this.addid,
            usermch: _this.usermch
          })
          .then(data => {
            var res = data.data.userlist;
            var allshop = data.data.pageHjmallindMch;
            var brr = data.data.userlist;
            var arr = data.data.pageHjmallindMch;

            for (var i = 0; i < brr.length; i++) {
              for (var j = 0; j < arr.length; j++) {
                if (arr[j].id == brr[i].mchid) {
                  arr.splice(j, 1);
                  j--;
                }
              }
            }
            console.log(data.data, "wwwwwwwwwww");
            // _this.dpglleft = brr
            _this.allShop = [];
            _this.arrNew = arr;
            _this.allShop = _this.arrNew;
            // _this.allShop = _this.arrNew.slice(0, 15);
            console.log(_this.dpglleft, "=====", _this.allShop);
            _this.dianpuguanli = true;
            this.$forceUpdate();
          });
      }

      // this.tjdp(this.addid);
    },
    //当前监管员添加店铺 id=监管员id
    tjdp(id) {
      var _this = this;
      _this.addid = id;
      console.log("_this.addid ", _this.addid);
      if (true) {
        _this.dianpuguanli = true;
        // 获取当前监管员的店铺
        _this
          .$get(`/gen/user-mch/list`, {
            userid: _this.addid,
            usermch: _this.usermch
          })
          .then(data => {
            var res = data.data.userlist;
            var allshop = data.data.pageHjmallindMch;
            var brr = data.data.userlist;
            var arr = data.data.pageHjmallindMch;
            console.log("data===>>>", data);
            for (var i = 0; i < brr.length; i++) {
              for (var j = 0; j < arr.length; j++) {
                if (arr[j].id == brr[i].mchid) {
                  arr.splice(j, 1);
                  j--;
                }
              }
            }
            _this.dpglleft = brr;
            // _this.allShop = [];
            // _this.arrNew = arr;
            // _this.allShop = _this.arrNew.slice(0, 15);
            // console.log(_this.dpglleft, "=====", _this.allShop);
            _this.dianpuguanli = true;
            this.$forceUpdate();
          });
      }
    },
    //删除单个店铺
    delShop(id) {
      console.log(id);
      var _this = this;
      _this
        .$post(`/gen/user-mch/delete`, {
          id: id
        })
        .then(data => {
          console.log(data.data);
          _this
            .$get(`/gen/user-mch/list`, {
              userid: _this.addid
            })
            .then(data => {
              var res = data.data.data;
              var allshop = data.data.pageHjmallindMch;
              _this.dpglleft = res;
              _this.allShop = allshop;
              console.log(_this.dpglleft, _this.allShop);
              // _this.dianpuguanli = !_this.dianpuguanli;
            });
          _this.dianpuguanli = !_this.dianpuguanli;
        });
    },
    //添加单个店铺
    addShop(id) {
      var _this = this;
      console.log(id);
      console.log(_this.addid);
      _this
        .$post(`/gen/user-mch/insert`, {
          mchid: id,
          userid: _this.addid
        })
        .then(data => {
          console.log(data.data);
          _this
            .$get(`/gen/user-mch/list`, {
              userid: _this.addid
            })
            .then(data => {
              var res = data.data.data;
              var allshop = data.data.pageHjmallindMch;
              _this.dpglleft = res;
              _this.allShop = allshop;
              console.log(_this.dpglleft, _this.allShop);
              // _this.dianpuguanli = !_this.dianpuguanli;
            });
          _this.dianpuguanli = !_this.dianpuguanli;
        });
    }
  }
};
</script>
<style scope>
.fun_box {
  width: 200px;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}
.table-bg1 {
  background: #fff;
  padding: 0;
}
.xiangq li {
  margin: 10px 0;
  color: #555;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.xiangq p {
  white-space: normal;
}
.xiangq li span {
  font-weight: bold;
  color: #222;
  white-space: nowrap;
  margin-right: 15px;
  width: 80px;
}
.xiangq li img {
  width: 200px;
}
.del-inner {
  cursor: pointer;
  color: rgb(176, 32, 32);
}
.del-inner:hover {
  color: rgb(218, 80, 80);
}
.flex-alv {
  display: flex;
  flex-direction: row;
  align-content: center;
}

.grjl {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sex {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  margin-bottom: 0;
}
.ant-table-pagination.ant-pagination {
  margin-right: 50px;
}
.flex-al {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-alv {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dpgl {
  width: 100%;
  /* height: 500px; */
  align-items: flex-start !important;
}
.w100 {
  width: 100%;
}
</style>